<template>
  <div class="jsbeautifyContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="jsbeautifyMain">
      <el-card style="background: black;">
        <div class="main">
          <el-button class="jsbeautifyBtn" type="primary" @click="testDiscrepancy">文本差异化</el-button>
          <el-button class="jsbeautifyBtn" type="primary" @click="beautify">美化代码</el-button>
          <el-button class="jsbeautifyBtn" type="primary" @click="reduce">压缩代码</el-button>
          <el-button class="jsbeautifyBtn" type="info" @click="more">更多</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const jsbeautify = ref()

const testDiscrepancy = () => {
  router.push({
    path: '/tools/testDiscrepancy',
    query: {
      title: '文本差异化'
    }
  })
}

const beautify = () => {
  ElMessage({
    type: 'warning',
    message: '正在开发中，敬请期待！'
  })
}

const reduce = () => {
  router.push({
    path: '/tools/reduce',
    query: {
      title: '压缩代码'
    }
  })
}

const more = () => {
  ElMessage({
    type: 'warning',
    message: '暂时没有更多了，看看别的吧！'
  })
}

onMounted(() => {
  
})

</script>

<style lang="scss" scoped>
.jsbeautifyContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .jsbeautifyMain {
    margin-top: 20px;
    padding: 30px;
    .el-card {
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);
    }
    .main {
      margin: 0 auto;
      width: 200px;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .jsbeautifyBtn {
        text-align: center;
        margin-bottom: 15px;
        margin-left: 0;
        width: 180px;
        height: 60px;
        border-radius: 6px;
      }

    }

  }

}
</style>